<template>
  <div class="lvchen_qinghua">
    <div class="lvchen">
      <div class="content_title">
        <span class="content_text">滤尘</span>
      </div>

      <div class="qinghua_body">
        <div class="qinghuaCol1">
          <div
            v-for="(item, index) in qinghuaData.qinghuaCol1Data"
            :key="index + '3'"
            class="lvchen_item"
          >
            <qinghua :data="item"></qinghua>
          </div>
        </div>
      </div>
    </div>
    <i class="wall"></i>
    <div class="qinghua">
      <div class="content_title">
        <span class="content_text">清花</span>
        <img
          class="content_img"
          src="@/assets/img/chart/qinghua.png"
          alt=""
          srcset=""
        />
      </div>

      <div class="qinghua_body">
        <div class="qinghuaCol2">
          <div class="qinghuaCol2_item1">
            <div>
              <div class="dongli" @click="clickHandleDl('qinghuaCol2_1')">
                <img src="@/assets/img/dongliguis.png" alt="" srcset="" />
              </div>
              <div @click="clickHandle('zhuamian', zhuamianData[0])">
                <zhuamian :data="zhuamianData[0]"></zhuamian>
              </div>
            </div>
            <div v-for="(item, index) in [0, 1]" :key="index + '3'">
              <div class="item">
                <div
                  class="item1"
                  @click="clickHandle('kaimian', jinkaimainData1[item])"
                >
                  <kaimian :data="jinkaimainData1[item]"></kaimian>
                </div>
                <div
                  class="item2"
                  @click="clickHandle('duocang', duocangData1[item])"
                >
                  <duocang :data="duocangData1[item]"></duocang>
                </div>
              </div>
            </div>
          </div>
          <div class="qinghuaCol2_item2">
            <div>
              <div class="dongli" @click="clickHandleDl('qinghuaCol2_2')">
                <img src="@/assets/img/dongliguis.png" alt="" srcset="" />
              </div>
              <div @click="clickHandle('zhuamian', zhuamianData[1])">
                <zhuamian :data="zhuamianData[1]"></zhuamian>
              </div>
            </div>
            <div v-for="(item, index) in [0, 1]" :key="index + '4'">
              <div class="item">
                <div
                  class="item1"
                  @click="clickHandle('kaimian', jinkaimainData2[index])"
                >
                  <kaimian :data="jinkaimainData2[index]"></kaimian>
                </div>
                <div
                  class="item2"
                  @click="clickHandle('duocang', duocangData2[index])"
                >
                  <duocang :data="duocangData2[index]"></duocang>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 抓棉弹窗控件 -->
      <zhuamianDialog ref="zhuamianDialog"></zhuamianDialog>
      <!-- 多仓弹窗控件 -->
      <duocangDialog ref="duocangDialog"></duocangDialog>
      <!-- 多仓弹窗控件 -->
      <kaimianDialog ref="kaimianDialog"></kaimianDialog>
      <!-- 动力柜弹窗控件 -->
      <dongliDialog ref="dongliDialog"></dongliDialog>
    </div>
  </div>
</template>

<script>
import dongliDialog from '../qcs/dialog/dialog_dongli/index';
import zhuamianDialog from '../qcs/dialog/dialog_zhuamian/index';
import duocangDialog from '../qcs/dialog/dialog_duocang/index';
import kaimianDialog from '../qcs/dialog/dialog_kaimian/index';
import qinghua from '../qcs/qinghua';
import zhuamian from '../qcs/zhuamian';
import duocang from '../qcs/duocang';
import kaimian from '../qcs/kaimian';
import COMMON from '@/utils/common';
import dongLiMenu from '../data/dongli.json';
import dongliItem from '../data/dongliItem.json';
export default {
  name: 'QingHua',
  props: {
    msg: String
  },
  components: {
    dongliDialog,
    zhuamianDialog,
    duocangDialog,
    kaimianDialog,
    qinghua,
    kaimian,
    duocang,
    zhuamian
  },
  created() {
    this.dongLiMenu = dongLiMenu;
    this.dongLiItem = dongliItem;
  },
  data() {
    return {
      zhumianShow: false,
      zhuamianData: [],
      jinkaimainData1: [],
      jinkaimainData2: [],
      duocangData1: [],
      duocangData2: [],
      qinghuaData: {
        qinghuaCol1Data: [
          { id: 1, status: 1, bodyVal: 100 },
          { id: 2, status: 1, bodyVal: 100 },
          { id: 3, status: 1, bodyVal: 100 },
          { id: 4, status: 1, bodyVal: 100 }
        ]
      }
    };
  },
  methods: {
    closeHandle() {
      this.$parent.$parent.$parent.closeParentHandle();
    },
    clickHandle(flag, item) {
      switch (flag) {
        case 'duocang':
          this.$parent.$parent.$parent.getInfoByDevSn('DUOCANG', item.devSn);
          this.$refs.duocangDialog.showDialog(item);
          break;
        case 'kaimian':
          this.$parent.$parent.$parent.getInfoByDevSn('KAIMIAN', item.devSn);
          this.$refs.kaimianDialog.showDialog(item);
          break;
        case 'zhuamian':
          this.$parent.$parent.$parent.getInfoByDevSn('ZHUAMIAN', item.devSn);
          this.$refs.zhuamianDialog.showDialog(item);
          break;
      }
    },
    clickHandleDl(item) {
      var getInfoQuary = this.dongLiMenu[item];
      var dialogData = this.dongLiItem[item];
      this.$parent.$parent.$parent.getInfoByDevSn('DONGLI', getInfoQuary);
      this.$refs.dongliDialog.showDialog(dialogData);
    }
  },
  computed: {
    zhuaMianGroupState() {
      return this.$store.state.workshop.zhuaMianGroupState;
    },
    kaiMianGroupState() {
      return this.$store.state.workshop.kaiMianGroupState;
    },
    duoCangGroupState() {
      return this.$store.state.workshop.duoCangGroupState;
    }

    // qingHuaGroupState() {
    //   return this.$store.state.workshop.qingHuaGroupState;
    // },
  },
  watch: {
    zhuaMianGroupState: {
      immediate: true,
      handler(val) {
        this.zhuamianData = COMMON.devSnFilter(val.data, 1, val.data.length);
      }
    },
    kaiMianGroupState: {
      immediate: true,
      handler(val) {
        this.jinkaimainData1 = COMMON.devSnFilter(val.data, 1, 2);
        this.jinkaimainData2 = COMMON.devSnFilter(val.data, 3, val.data.length);
      }
    },
    duoCangGroupState: {
      immediate: true,
      handler(val) {
        this.duocangData1 = COMMON.devSnFilter(val.data, 1, 2);
        this.duocangData2 = COMMON.devSnFilter(val.data, 3, val.data.length);
      }
    }

    // qingHuaGroupState: {
    //   immediate: true,
    //   handler(val) {

    //     this.qinghuaData.qinghuaCol1Data = val.data

    //   },
    // },
  }
};
</script>

<style scoped></style>
